<template>
    <div class="myteam-item-wrapper">

        <!-- 标题行 -->
        <van-row class="title-row margin-bottom">
            <van-col :span="4">
                <span class="tilte-row-teamname">
                    <slot></slot>
                </span>
            </van-col>

            <van-col :span="4">
                <el-input v-model="value.name" class="team-name" :placeholder="value.name || '队伍名字'" />
            </van-col>

            <van-col :span="4">
                <el-select class="team-priority" placeholder="优先级" v-model="value.priority" clearable
                    :class="(value.priority == '1' ? 'el-selct-font-red' : value.priority == '2' ? 'el-selct-font-blue' : 'el-selct-font-gray')">
                    <el-option v-if="priorityOptions && priorityOptions.length >0" v-for="item in priorityOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </van-col>

            <van-col :span="4">
                <el-select class="team-boss" placeholder="指定boss" v-model="value.boss" clearable>
                    <el-option v-if="bossOptions && bossOptions.length >0" v-for="item in bossOptions" :key="item.value" :label="item.label" :value="item.label" style="height:44px">
                        <el-image :src="item.icon" style="height:40px;width:40px;margin: 2px;float: left;"/>
                        <div style="height: 40px;line-height:40px;float: left;">{{item.name}}</div>
                    </el-option>
                </el-select>
            </van-col>

            <van-col :span="4">
                <el-button-group class="width-100">
                    <el-button class="team-del-btn-small" icon="el-icon-caret-top" @click="teamUp(value)" type="danger" />
                    <el-button class="team-del-btn-small" icon="el-icon-caret-bottom" @click="teamDown(value)"
                        type="danger" />

                    <el-button class="team-del-btn" type="danger" @click="$emit('remove')">删除</el-button>
                    <el-button class="team-del-btn" type="danger" @click="$emit('reset')">重置</el-button>
                </el-button-group>
            </van-col>
        </van-row>

        <!-- 头像&权要&刻印&按钮 -->
        <van-row class="content-row margin-bottom">
            <van-col :span="1"></van-col>
            <template v-if="value && value.data" v-for="(role,i) in value.data">
                <van-col :span="6" class="position-relative">
                    <!-- 头像img -->
                    <div class="content-head-div">
                        <van-image class="content-head" @drop.prevent.native='dropDrag(role)' @dragover.prevent.native='overDrag'
                            :src="role.role_icon" height="50" width="50" >
                            <template #error>
                                <label>拖入</label>
                                <label>角色</label>
                            </template>
                        </van-image>
                    </div>

                    <!-- 权钥img -->
                    <div class="content-weap-div mouse-point" @click="onSelectTeamWeap(role)">
                        <van-image class="content-weap mouse-point" :src="role.weap_icon" height="40" width="40"
                            error-icon="plus">
                            <!-- <template #error>
                                <label style="top:-7px;">选择</label>
                                <label style="bottom:-3.5px;">权钥</label>
                            </template> -->
                        </van-image>
                    </div>

                    <!-- 刻印img -->
                    <div class="content-engr-div" >
                        <van-image class="content-engr mouse-point float-left" v-for="(engr,ei) in role.engrs"
                            @click.native="onSelectTeamEngr(role,engr)"
                            :src="engr.icon" height="34" width="34">
                            <!-- <label v-if="engr.icon">{{ei|locationWord}}</label> -->
                        </van-image>
                    </div>

                    <!-- 功能按钮 -->
                    <div class="content-btn-div">
                        <van-button icon="search" @click="onEngrView(role.engrs)" ><!--详情--></van-button>
                        <van-button icon="like-o" @click="loadMyFavoriteList(i)"><!--载入--></van-button>
                        <van-button icon="minus" @click="removeTeamRoleByIndex(i)"><!--删除--></van-button>
                    </div>
                </van-col>
                <van-col :span="1"><b>{{i==2?'':'+'}}</b></van-col>
            </template>
        </van-row>

        <!-- 选择权要 弹出层 -->
        <weap-group-view :isShow="isShowSelectWeap" v-on:close="isShowSelectWeap = false"
            v-on:select="selectTeamWeap" :currentRole="currentSelectWeapData" />

        <!-- 选择刻印 弹出层 -->
        <engr-group-view :groupViewShow="isShowSelectEngr" v-on:close="isShowSelectEngr = false"
            v-on:select="selectTeamEngr" />

        <!-- 查看角色刻印配置 弹出层 -->
        <van-popup v-model="isShowEngrsView" round>
            <calc-result-view :calcResult="currentEngrsViewData" v-on:crvClose="isShowEngrsView = false"
                v-on:engrView="onViewSelectEngr">
                <!-- <template #right-btn>
                </template> -->
                <!-- <template #bottom-btn>
                    <van-button icon="share-o" plain type="warning" @click="onShare(calcResult)" disabled>分享</van-button>
                </template> -->
            </calc-result-view>
        </van-popup>

        <!-- 载入收藏 弹出层 -->
        <van-popup v-model="loadMyFavoriteShow" round>
            <MyTeamLoadFavoriteList 
                v-on:close="loadMyFavoriteShow=false"
                v-on:select="applyMyFavoriteList"/>
        </van-popup>

    </div>  
</template>

<script>
import { TeamServer } from '../server/servers';
import { Toast, Notify } from 'vant';
import EngrGroupView from './popups/EngrGroupView';
import WeapGroupView from './popups/WeapGroupView';
import CalcResultView from "./CalcResultView";
import MyTeamLoadFavoriteList from './MyTeamLoadFavoriteList';

const locWrods = ['I', 'II', 'III', 'IV', 'V', 'VI'];
const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];

export default {
  name: 'MyTeamItem',
  components: { EngrGroupView, WeapGroupView, CalcResultView, MyTeamLoadFavoriteList },
  props:{
    scheme:{type: Object},
    value: { type: Object },
    allRoles_list: { type: Array },
    bossOptions: { type: Array },
  },
 
  filters: {
    locationWord(data) {
        return locWrods[data]
    },
    favoriteButtonText(flag) {
      return flag ? '已收藏' : '收藏';
    },
    favoritedIconName(flag) {
      return flag ? 'like' : 'like-o';
    },
  },

  computed:{
        affixList() {
            return this.$store.state.affixList;
        },

        affixOptions() {
            return this.$store.state.affixOptions;
        },
    },

  data:()=>({
    priorityOptions: [
        {
            label: "很重要",
            value: "1"
        },
        {
            label: "比较重要",
            value: "2"
        },
        {
            label: "不重要",
            value: "3"
        }
    ],
    isShowSelectWeap: false,
    currentSelectWeapData: null,

    isShowSelectEngr: false,
    currentSelectEngrData: null,

    isShowEngrsView: false,
    currentEngrsViewData: null,

    loadMyFavoriteCurrent: null,
    loadMyFavoriteShow: false,
  }),

  methods: {
    test(obj) {
        console.log('test', obj);
    },

    onSelectTeamWeap(data) {
        console.log("selectTeamWeap", data);

        //校验是否选择了角色
        if (data.role_id == 0) {
            return Notify({ message: '\n先拖入角色再选择权钥哦!', type: 'warning',duration:2000});
        }

        this.currentSelectWeapData = data;
        this.isShowSelectWeap = true;
    },

    selectTeamWeap(weap) {
        // console.log("选择权要回调", weap, this.currentSelectWeapData)
        this.currentSelectWeapData.weap_icon = weap.icon;
        this.currentSelectWeapData.weap_id = weap.id;
        this.currentSelectWeapData.weap_name = weap.per_name + weap.real_name;

        this.currentSelectWeapData = null;
    },

    onSelectTeamEngr(role,data) {
        if(!role || !role.role_id){
            Notify({message:'\n先拖入角色再选择刻印哦!',type:'warning',duration:2000})
            return
        }
        this.currentSelectEngrData = data;
        this.isShowSelectEngr = true;
    },

    selectTeamEngr(engr) {
        // console.log("选择刻印回调", engr, this.currentSelectEngrData)
        Object.keys(engr).forEach(e => {
            this.currentSelectEngrData[e] = engr[e];
        })
    },

    onEngrView(datas) {
        let rs = TeamServer.queryEngrGroupByTeamEngrs(datas);
        // console.log("onEngrView", datas, rs);

        this.currentEngrsViewData = rs;
        this.isShowEngrsView = true;
    },

    loadMyFavoriteList(current){
        this.loadMyFavoriteCurrent = current;
        this.loadMyFavoriteShow = true;
    },

    applyMyFavoriteList(list){
        this.loadMyFavoriteShow = false;
        console.log("applyMyFavoriteList list",list)
        this.value.data[this.loadMyFavoriteCurrent].engrs = list
        this.loadMyFavoriteCurrent = null;
    },

    onViewSelectEngr(datas) {

    },

    overDrag() { },

    dropDrag(item) {
        this.$emit("dropDrag", item);
    },

    teamUp(data){
        if(!this.scheme){
            return
        }

        let team,index;

        //依次在dream_team和free_team中查找
        this.scheme.dream_team && (index = this.scheme.dream_team.indexOf(data))
        if(index && index >=0) {
            team = this.scheme.dream_team;
            team.splice(index,1);
            team.unshift(data)
            return
        }

        this.scheme.free_team && (index = this.scheme.free_team.indexOf(data))
        if(index && index >=0) {
            team = this.scheme.free_team;
            team.splice(index,1);
            team.unshift(data)
            return
        }
    },

    teamDown(data){
        if(!this.scheme){
            return
        }

        let team,index;

        //依次在dream_team和free_team中查找
        // 注意(0)为false
        this.scheme.dream_team && (index = this.scheme.dream_team.indexOf(data))
        if(index!=undefined && index >=0) {
            team = this.scheme.dream_team;
            team.splice(index,1);
            team.push(data)
            return
        }

        this.scheme.free_team && (index = this.scheme.free_team.indexOf(data))
        if(index!=undefined && index >=0) {
            team = this.scheme.free_team;
            team.splice(index,1);
            team.push(data)
            return
        }
    },

    // 队伍中移除某个角色
    removeTeamRoleByIndex(index){
        //删除used
        let id = this.value.data[index].role_id
        this.scheme.dream_team && this.scheme.dream_team.some(e=>{
            if(e===this.value){
                this.scheme.used = this.scheme.used.filter(e1=>e1!=id)
                return true
            }
        })

        //不能覆盖对象，只能依次拷贝属性
        let newTeamRole = TeamServer.getNewTeamRole() //空的对象
        Object.keys( newTeamRole).forEach(key=>{
            this.value.data[index][key] = newTeamRole[key]
        })

        console.log('deletTeamRoleIndex',this.value)
    }
  }
}
</script>

<style scoped>

    .myteam-item-wrapper{
        height: 220px;
        border-top: 1px solid rgb(202, 202, 202);
        border-bottom: 1px solid rgb(202, 202, 202);
        margin:3px 0px;
        padding-top: 1px;
    }
    
    .title-row{
        padding:0px 10px;
    }

    .title-row .van-col{
        width: 90px;
        margin-right: 4px;
        height: 32px;
        line-height: 32px;
    }

    .title-row .tilte-row-teamname{
        font-weight: 500;
    }

    .content-row .van-col:nth-of-type(odd){
        text-align: center;
        vertical-align:middle;
        height: 52px;
        line-height: 52px;
    }
    .content-head-div{
        height: 52px;
        width: 52px;
        margin-left:10px;
        border: 1px solid rgb(235, 237, 240);
        float: left;
        box-sizing:border-box;
        padding: 0;
    }
    .content-head{
        /* position: absolute; */
        /* left:12px; */
        /* top:0; */
        float: left;
    }

    .content-head /deep/ .van-image__error label{
        font-size: 14px;
        height:25px;
        width: 50px;
        line-height: 25px;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .content-weap-div{
        height: 52px;
        width: 52px;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
        border: 1px solid rgb(235, 237, 240);
        border-left: 0;
        float: left;
        box-sizing:border-box;
        padding: 5px;
    }

    .content-weap /deep/ .van-image__error label{
        /* position:absolute; */
        font-size: 14px;
        height:25px;
        width: 50px;
        line-height: 25px;
        padding: 0;
        margin: 0;
    }

    .content-engr-div{
        /* height: 80px;*/
        width: 102px;
        margin-left: 10px;
        float: left;
        border:1px solid rgb(235, 237, 240);
    }

    .content-engr-div .van-image label{
        position: absolute;
        left:0px;
        top:0px;
        height:34px;
        width: 34px;
        text-align: center;
        vertical-align: middle;
        line-height: 34px;
        font-weight: bold;
        opacity: 0.7;
    }

    .content-btn-div{
        height: 30px;
        width: 104px;
        margin-left: 10px;
        float: left;
    }

    .content-btn-div .van-button{
        height: 30px;
        width:  calc(104px/3);
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
        float: left;
    }

    .el-selct-font-red /deep/ .el-input input {
    color: red;
    }

    .el-selct-font-blue /deep/ input {
        color: blue;
    }

    .el-selct-font-gray /deep/ input {
        color: gray;
    }

    .title-row .el-button {
        height: 30px;
        padding: 0;
    }

    .title-row .team-del-btn {
        width: 31%;
        font-size: 12px;
    }

    .title-row .team-del-btn-small {
        width: 20%;
    }

    /* * {
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor:default
    } */
</style>